import {CheckAccessEleType} from "@kordar-lib/base";
import {
    PaginationPanel,
    resourceAccessItems,
    resourceRemoveEvent,
    resourceService,
    useTable,
    withDocHoc
} from "@kordar/easyui-tpl";
import React, {useEffect} from "react";
import {DefaultPanel, useRefDialog} from "@kordar/easyui";
import {BucketContext} from "./context";
import TablePanel from "./table";
import {FormDialog} from "./dialog";


let name = "bucket"
let accessItems = [
    { type: CheckAccessEleType.AND, value: ["/resource/bucket/list"], key: "bucket" },
    ...resourceAccessItems(name)
]

const Bucket = ({ pageConfig, fetchConfig, fetchVersion }) => {

    const tb = useTable({
        name: name,
        fetch: (request) => resourceService.list(name, request),
        checkAccessItems: accessItems,
        defaultPageSize: 30
    })

    tb.ctx.registerEvent("remove", resourceRemoveEvent(tb.ctx))

    let formdlg = useRefDialog()

    useEffect(() => {
        tb.ctx.search()
    }, [tb.version])

    return (
        <BucketContext.Provider value={{ ctx: tb.ctx, ctxState: tb.ctxState, pageConfig: pageConfig, fetchConfig: fetchConfig, refs: { formdlg }}}>
            <DefaultPanel mode={"cover"} footer={() => <PaginationPanel ctx={tb.ctx} ctxState={tb.ctxState} />}>
                <FormDialog {...formdlg} />
                <TablePanel />
            </DefaultPanel>
        </BucketContext.Provider>
    )
}

export default withDocHoc({ name: "Bucket", fetchConfig: () => resourceService.configs(name) })(Bucket)
